<template>
  <n-el tag="div" class="div-two02-three01">
    <n-el tag="div" class="main-box" v-for="item in data_list" :key="item">
      <n-el tag="div">
        <span class="stock-code">{{ item.top_num }}、</span>
        <span class="stock-code2">{{ item.song_author }}</span>
        <span class="stock-code4">{{ item.song_name }}</span>
      </n-el>
    </n-el>
  </n-el>
  <n-el tag="div" class="div-two02-three03">
    <n-pagination
      v-model:page="data_list_page"
      :page-count="data_list_total_page"
      @update-page="pageChange"
    />
  </n-el>
</template>


<script setup lang="ts" name="HZForecast04">
import { onMounted } from "vue";
import * as curdApi from "/@api/hz-curd-api";
import { ref, inject } from "vue";

// eslint-disable-next-line no-undef
const props = defineProps({
  id: {
    type: String,
    default: "pie-simple",
  },
  showTitle: {
    type: Boolean,
    default: true,
  },
  showLegend: {
    type: Boolean,
    default: true,
  },
  showTooltip: {
    type: Boolean,
    default: true,
  },
  title: {
    type: String,
    default: "xxxxxxx",
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  apiPath: {
    // api路径
    type: String,
    default: "",
  },
  chartsType: {
    // 图表类型
    type: String,
    default: "xxxxxxx",
  },
  methodType: {
    type: String, // 请求方式
    default: "get",
  },
});

// 通过 inject 函数将父组件提供的 sendMessage 函数注入进来
// 提供类型注解告诉 TypeScript 这是一个函数
const sendMessage = inject("sendMessage") as (msg: string) => void;

const code_ref = ref("");
const data_list = ref([]);
const data_list_category = ref(0);
const data_list_page = ref(1);
const data_list_total_page = ref(1);

onMounted(() => {
  loadDataList();
});

function loadDataList() {
  getCom5().then((res: any) => {
    data_list.value = res.data.items;
    data_list_total_page.value = res.data.totalPage;
  });
}

const getCom5 = async () => {
  return await curdApi.goGet(
    {
      category: code_ref.value,
      page: data_list_page.value,
      size: 20,
      code: code_ref.value,
    },
    "/api/jd/TopList/"
  );
};

function pageChange(page: any) {
  data_list_page.value = page;
  loadDataList();
}

// 刷新图表方式，该方法需要提供给外部调用
// eslint-disable-next-line no-unused-vars
const refreshCharts = (code: any) => {
  code_ref.value = code;
  loadDataList();
};

// eslint-disable-next-line no-undef
defineExpose({
  refreshCharts,
});
</script>

<style scoped>
::-webkit-scrollbar {
  display: none;
}

.div-two02-three01 {
  width: 100%;
  height: 90%;
  display: flex;
  flex-direction: row;
  overflow: auto;
  justify-content: center;
  flex-wrap: wrap;
  max-height: 115vh; /* 在这里可以设置你希望的最大高度 */
}

.main-box {
  width: 98%;
  height: 8%;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: center;
  align-items: center;
  transform: scale(0.9);
  background-color: #383838bd;
}
.single-notification {
  padding: 10px;
  margin: 5px 0;
  background-color: #f3f3f3; /* 你的背景颜色 */
  border: 1px solid #e3e3e3; /* 边框颜色 */
}

.main-box:hover {
  background-color: #0f0f0fb6; /* 当鼠标指向该条通知时的背景色 */
}
.div-two02-three03 {
  width: 100%;
  height: 3%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1%;
}

.stock-code {
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 26px;
  font-weight: bold;
}

.stock-code2 {
  position: absolute;
  left: 70px;
  top: 10px;
  font-size: 20px;
}

.stock-code3 {
  width: 80%;
  position: absolute;
  left: 95px;
  top: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stock-code4 {
  position: absolute;
  right: 10px;
  top: 30px;
}
</style>